<template>
  <d2-container>
    <div class="pt-3">
      <el-form :model="form" label-width="100px" ref="form" :rules="formRules">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="first">
            <div style="width: 30%;" class="mt-2">
              <el-form-item label="当前期数" prop="number_periods">
                <el-input v-model="form.number_periods" placeholder="当前期数"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%;" class="mt-2">
              <el-form-item label="商品名称" prop="title">
                <el-input v-model="form.title" placeholder="商品名称"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%;" class="mt-2">
              <el-form-item label="商品副标题" prop="sub_title">
                <el-input v-model="form.sub_title" placeholder="商品副标题"></el-input>
              </el-form-item>
            </div>
            <div style="width: 30%;" class="mt-2">
              <el-form-item label="商品品牌" prop="brand">
                <el-input v-model="form.brand" placeholder="商品品牌"></el-input>
              </el-form-item>
            </div>
            <div style="width: 20%;" class="mt-2">
              <el-form-item label="排序" prop="sort">
                <el-input v-model="form.sort" placeholder="排序"></el-input>
              </el-form-item>
            </div>
            <div class="mt-2">
              <el-form-item label="抢购档位" prop="category">
                <el-select v-model="form.category" placeholder="请选择档位">
                  <el-option v-for="item in categoryList" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="row-ac mt-2">
              <div>
                <el-form-item label="所需钻石" prop="points_required">
                  <el-input-number v-model="form.points_required" :precision="0" :min="0" :step="1"></el-input-number>
                </el-form-item>
              </div>
              <div class="ml-5">
                <el-form-item label="市场参考售价" prop="mar_price">
                  <el-input-number v-model="form.mar_price" :precision="2" :min="0" :step="0.01"></el-input-number>
                </el-form-item>
              </div>
            </div>
            <div class="row-ac mt-2">
              <div>
                <el-form-item label="已参与人数" prop="used_quantity">
                  <el-input-number v-model="form.used_quantity" :precision="0" :min="0" :step="1"></el-input-number>
                </el-form-item>
              </div>
              <div class="ml-5">
                <el-form-item label="总份数" prop="commodity">
                  <el-input-number v-model="form.commodity" :precision="0" :min="0" :step="1"></el-input-number>
                </el-form-item>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品相册" name="specifications">
            <div style="width: 80%;">
              <el-form-item label="商品主图" prop="main_image">
                <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false"
                  :on-success="handlemainSuccess" :before-upload="beforeMaintarUpload">
                  <img v-if="form.main_image" :src="form.main_image" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
            <div class="mt-2">
              <el-form-item label="产品相册" prop="image_list">
                <el-upload :action="actionUrl" list-type="picture-card" :on-remove="handleRemove"
                  :on-success="handleImageListSuccess" :file-list="form.image_list" :headers="headersobj">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商品详情" name="details">
            <div style="width: 80%;height: 600px;" class="mt-3">
              <el-form-item prop="content">
                <d2-quill v-model="form.details" />
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="row" style="width: 80%;margin-top: 20px;">
          <el-form-item>
            <el-button plain>取消</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </d2-container>
</template>

<script>
  import {
    imagesUploadUrl
  } from "@/utils/interface"
  import {
    paniccategoryListUrl,
    panicbuyCreateUrl,
    panicbuyDetailUrl,
    panicbuyUpdateUrl
  } from '@/utils/takemoney'
  import d2Quill from '@/components/d2-quill'
  import {
    baseURL
  } from '@/utils/request'
  export default {
    components: {
      d2Quill
    },
    data() {
      return {
        categoryList: [],
        addPanicState: true,
        form: {
          number_periods: '',
          title: '',
          sub_title: '',
          category: '',
          main_image: '',
          image_list: '',
          details: '',
          points_required: '',
          mar_price: '',
          used_quantity: 0,
          commodity: 0,
          brand: '',
          sort: 1,
          panic_state: 0,
        },
        imageList: [],
        formRules: {
          number_periods: [{
            required: true,
            message: '请输入当前期数',
            trigger: 'blur'
          }],
          title: [{
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }],
          category: [{
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }],
          brand: [{
            required: true,
            message: '请选择商品品牌',
            trigger: 'change'
          }],
          details: [{
            required: true,
            message: '请填写商品详情',
            trigger: 'blur'
          }],
        },
        activeName: 'first',
        actionUrl: baseURL + imagesUploadUrl,
        fileList: [],
        headersobj: null,
        getPanicId: ''
      }
    },
    mounted() {
      if (this.$route.query.panicId) {
        this.getPanicId = this.$route.query.panicId
        this.getProductDetail()
        this.addPanicState = false
      } else {
        this.addPanicState = true
      }
      this.headersobj = {
        Authorization: 'Bearer ' + util.cookies.get('token')
      }
    },
    created() {
      this.$get(paniccategoryListUrl).then(res => {
        this.categoryList = res.data.data.list
        this.form.category = this.categoryList[0].id
      })
    },
    methods: {
      handleClick() {

      },
      handlemainSuccess(val) {
        this.form.main_image = val.data.url
      },
      beforeMaintarUpload() {

      },
      handleImageListSuccess() {
        this.imageList.push({
          url: response.data.url
        })
        this.form.image_list = this.imageList
      },
      handleRemove(file, fileList) {
        const index = this.form.image_list.findIndex((item) => item.url === file.url);
        if (index !== -1) {
          this.form.image_list.splice(index, 1);
        } else if (this.form.image_list.length > 0) {
          this.form.image_list.pop();
        }
      },
      getProductDetail() {
        this.$get(panicbuyDetailUrl + this.getPanicId + '/').then(res => {
          if (res.data.code == 200) {
            this.form = {
              number_periods: res.data.data.number_periods,
              title: res.data.data.title,
              sub_title: res.data.data.sub_title,
              category: res.data.data.category,
              main_image: res.data.data.main_image,
              details: res.data.data.details,
              points_required: res.data.data.points_required,
              mar_price: res.data.data.mar_price,
              used_quantity: res.data.data.used_quantity,
              commodity: res.data.data.commodity,
              brand: res.data.data.brand,
              sort: res.data.data.sort,
              panic_state: res.data.data.panic_state,
            }
          }

          this.imageList = res.data.data.image_list
        })
      },
      submitForm() {
        let formData = new FormData()
        formData.append('number_periods', this.form.number_periods)
        formData.append('title', this.form.title)
        formData.append('category', this.form.category)
        formData.append('sub_title', this.form.sub_title)
        formData.append('main_image', this.form.main_image)
        formData.append('image_list', JSON.stringify(this.form.image_list))
        formData.append('details', this.form.details)
        formData.append('points_required', this.form.points_required)
        formData.append('mar_price', this.form.mar_price)
        formData.append('used_quantity', this.form.used_quantity)
        formData.append('commodity', this.form.commodity)
        formData.append('brand', this.form.brand)
        formData.append('sort', this.form.sort)
        formData.append('panic_state', this.form.panic_state)

        if (this.addPanicState) {
          this.$post(panicbuyCreateUrl, formData).then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message.success('添加成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        } else {
          this.$put(panicbuyUpdateUrl + this.getPanicId + '/', formData).then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message.success('修改成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        }
      }
    }
  }
</script>

<style>
</style>
